<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ng-plugins</title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

<body ng-controller="ctrl">
  <div class="box">
    <div class="row">
      <div ng-select options="options" mapping="_id,name" value="value"></div>
    </div>
    <div class="row">
      <div ng-datepicker date="2015-10-20"></div>
    </div>
    <div class="row">
      <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-danger" ng-click="showAlert('error')">危险框</button>
        <button type="button" class="btn btn-warning" ng-click="showAlert('warning')">警告框</button>
        <button type="button" class="btn btn-success" ng-click="showAlert('success')">成功框</button>
      </div>
      <div ng-alert alert="alert"></div>
    </div>
    <div class="row">
      <!--confirm-->
      <button type="button" class="btn btn-default" ng-click="showConfirm()">确认框</button>
      <div ng-confirm confirm="confirm"></div>
      <!--Loading-->
      <button type="button" class="btn btn-default" ng-click="showLoading()">Loading</button>
      <div ng-loading is-loading="isLoading"></div>
      <!--modal-->
      <button type="button" class="btn btn-default" ng-click="showModal()">模态框</button>
      <div ng-modal modal="modal">
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
      </div>
    </div>
    <div class="row">
      <div ng-pager pager="pager"></div>
    </div>
    <div class="row">
      <div ng-scrollbar height="300">
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
        <div style="width: 100%; height: 100px; background-color: blue;"></div>
        <div style="width: 100%; height: 100px; background-color: red;"></div>
      </div>
    </div>
  </div>
  <script src="js/vendor.js"></script>
  <script src="js/app.js"></script>
</body>

</html>